<template>
  <footer>
    <ul>
      <router-link v-for="(item, index) in iconList"
          :key="index"
          :to="item.path"
          tag="li">
         <img :src="item.path === $route.path ? item.active : item.icon" alt="">
         <p>{{ item.name}}</p>
      </router-link>
    </ul>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      iconList: [
        {
          icon: require('../assets/shouye.png'),
          active: require('../assets/shouye_green.png'),
          path: '/home',
          name: '首页'
        },
        {
          icon: require('../assets/qiangxian.png'),
          active: require('../assets/qiangxian_green.png'),
          path: '/shopping',
          name: '抢鲜'
        },
        {
          icon: require('../assets/caiquan.png'),
          active: require('../assets/caiquan_green.png'),
          path: '/vegetables',
          name: '菜圈'
        },
        {
          icon: require('../assets/dingdan.png'),
          active: require('../assets/dingdan_green.png'),
          path: '/order',
          name: '订单'
        },
        {
          icon: require('../assets/wode.png'),
          active: require('../assets/wode_green.png'),
          path: '/user',
          name: '我的'
        }
      ]
    }
  },
  methods: {
  }
}
</script>
